<template>
  <el-config-provider :locale="Ellocale">
    <div id="app">
      <router-view />
      <FloatingContact />
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { watch, computed } from "vue";
import { useUserStore } from "@/store/user";
import { useI18n } from "vue-i18n";
import zh from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import ja from "element-plus/dist/locale/ja.mjs";
import FloatingContact from '@/components/common/FloatingContact.vue'

const userStore = useUserStore();
const Ellocale = computed(() =>
  userStore.userInfo.language === "zh"
    ? zh
    : userStore.userInfo.language === "en"
    ? en
    : ja
);
const { locale } = useI18n();
watch(
  () => userStore.userInfo.language!,
  (newLang) => {
    locale.value = newLang;
  },
  { immediate: true }
);
</script>

<style lang="scss">
// 导入基础样式
@use "./styles/base.scss";
#app {
  width: 100%;
  height: 100%;
}

// 全局后台样式
.admin-layout {
  .el-menu {
    background-color: var(--menu-bg-color);
    border-right: 1px solid var(--border-color);

    .el-menu-item,
    .el-sub-menu__title {
      color: var(--menu-text-color);

      &:hover {
        background-color: var(--menu-hover-bg);
      }

      &.is-active {
        background-color: var(--menu-active-bg);
        color: var(--primary-color);
      }
    }
  }

  // 水平菜单样式
  .el-menu--horizontal {
    background-color: var(--bg-color);
    border-bottom: none;

    .el-menu-item {
      height: var(--header-height);
      line-height: var(--header-height);
      color: var(--text-color);

      &:hover {
        background-color: var(--menu-hover-bg);
      }

      &.is-active {
        background-color: var(--menu-active-bg);
        color: var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
      }
    }
  }

  .el-main {
    background-color: var(--bg-color-secondary);
  }

  .el-header {
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
  }

  .el-aside {
    background-color: var(--menu-bg-color);
    border-right: 1px solid var(--border-color);
  }
}
</style>
